<template>
  <el-dialog
    v-model="visible"
    :title="dialogTitle"
    width="500px"
    @close="handleCancel"
  >
    <el-form
      ref="form"
      :model="formData"
      label-width="100px"
      :rules="formRules"
      label-position="right"
    >
      <el-form-item label="姓名" prop="name">
        <el-input v-model="formData.name" />
      </el-form-item>

      <el-form-item label="性别" prop="sex">
        <el-select v-model="formData.sex" placeholder="请选择性别">
          <el-option label="男" value="男" />
          <el-option label="女" value="女" />
        </el-select>
      </el-form-item>

      <el-form-item label="职务" prop="position">
        <el-input v-model="formData.position" />
      </el-form-item>

      <el-form-item label="邮箱" prop="email">
        <el-input v-model="formData.email" />
      </el-form-item>

      <el-form-item label="座机" prop="landline">
        <el-input v-model="formData.landline" />
      </el-form-item>

      <el-form-item label="移动电话" prop="phone">
        <el-input v-model="formData.phone" />
      </el-form-item>

      <el-form-item label="备注" prop="remark">
        <el-input v-model="formData.remark" type="textarea" :rows="3" />
      </el-form-item>

      <div class="dialog-footer">
        <el-button @click="handleCancel">取 消</el-button>
        <el-button type="primary" @click="handleSave">保 存</el-button>
      </div>
    </el-form>
  </el-dialog>
</template>

<script setup lang="ts">
import { ref } from 'vue'
// import { CustContactsVO, CustContactsApi } from '@/api/customermanager/custcontacts/index'
import { CustContactsVO, CustContactsApi } from '@/api/customermanager/custcontacts/index'

const props = defineProps<{
  modelValue: boolean
  currentData?: CustContactsVO | null
  custId?: number | string
}>()

// const emit = defineEmits<{
//   (e: 'update:modelValue', value: boolean): void
//   (e: 'save-success'): void
// }>()

const visible = ref(false)
// const formData = ref<CustContactsVO>(new CustContactsVO())
const formData = ref<CustContactsVO>({
  id: 0,
  custId: props.custId || 0,
  name: '',
  sex: '',
  position: '',
  email: '',
  landline: '',
  phone: '',
  facebook: '',
  ins: '',
  tiktok: '',
  youtube: '',
  linkedin: '',
  remark: ''
})
const formRules = ref({
  name: [{ required: true, message: '请输入姓名', trigger: 'blur' }],
  phone: [{ required: true, message: '请输入手机号', trigger: 'blur' }],
})

const dialogTitle = ref('新增联系人')

// 监听 custId 变化
watch(() => props.custId, (newVal) => {
  formData.value.custId = newVal
})

// 保存操作
const handleSave = async () => {
  try {
    await CustContactsApi.createCustContacts(formData.value)
    emit('save-success')
    visible.value = false
    emit('update:modelValue', false)
  } catch (error) {
    console.error('保存失败:', error)
  }
}

const emit = defineEmits(['save-success'])

const saveContact = async () => {
  try {
    // 保存联系人逻辑
    await CustContactsApi.saveContact(contactData)
    
    ElMessage.success('联系人保存成功')
    
    // 关键：触发 save-success 事件
    emit('save-success')
    
    // 关闭弹窗
    dialogVisible.value = false
  } catch (error) {
    ElMessage.error('保存失败')
  }
}

// 取消操作
const handleCancel = () => {
  visible.value = false
  emit('update:modelValue', false)
}

// 监听 visible 变化，用于清空表单等操作
visible.value = props.modelValue

// 监听 modelValue 变化
watch(() => props.modelValue, (newVal) => {
  console.log('收到 modelValue:', newVal)
  visible.value = newVal
})

// 当弹窗关闭时，通知父组件更新
const handleClose = () => {
  emit('update:modelValue', false)
}
</script>

<style scoped>
.dialog-footer {
  text-align: right;
}
</style>